<template>
  <div class="container">
    <main>
      content
    </main>
    <section>
      <List/>
    </section>
  </div>
</template>

<script lang="ts" setup>
// import { defineComponent } from 'vue';
import List from "./components/List.vue"
// export default defineComponent({
//   components: { List },
//   setup() {
    
//   },
// })

</script>

<style>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

body {
  background: #389ccc;
}
</style>
<!-- scoped ，无法跨组件或全局生效 -->
<style scoped>
.container {
  width: 1020px;
  margin: 0 auto;
  display: flex;
  padding: 50px 0;
}

main,
section {
  background: white;
}

main {
  flex: 1;
  margin-right: 10px;
  text-align: center;
  line-height: 300px;
  font-size: 22px;
  color: #ccc;
}

section {
  width: 350px;
}
</style>